<template>
  <el-container v-if="state.showMenu" class="container">
    <el-aside class="aside">
      <div class="aside-header">
        <img src="https://s.weituibao.com/1582958061265/mlogo.png" alt="" />
        <span>vue3 admin</span>
      </div>
      <div class="line"></div>

      <el-menu
        background-color="#222832"
        text-color="#fff"
        :default-openeds="state.defaultOpen"
        :router="true"
        :default-active="state.currentPath"
      >
        <el-sub-menu index="1">
          <template #title>
            <span>Dashboard</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/introduce"><el-icon><data-line /></el-icon>系统介绍</el-menu-item>
            <el-menu-item index="/dashboard"><el-icon><odometer /></el-icon>Dashboard</el-menu-item>
            <el-menu-item index="/add"><el-icon><plus /></el-icon>添加商品</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <span>首页配置</span>
          </template>
          <el-menu-item-group>
             <el-menu-item index="/swiper"><el-icon><data-line /></el-icon>轮播图配置</el-menu-item>
            <el-menu-item index="/hot"><el-icon><odometer /></el-icon>热销商品配置</el-menu-item>
            <el-menu-item index="/new"><el-icon><plus /></el-icon>新品上线配置</el-menu-item>
            <el-menu-item index="/recommend"><el-icon><plus /></el-icon>为你推荐配置</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
      
    </el-aside>
    <el-container class="content">
      <el-header>
        <Header />
      </el-header>
      <el-main class="main-content">
        <router-view></router-view>
      </el-main>
      <el-footer>
        <Footer/>
      </el-footer>
    </el-container>
  </el-container>
  <el-container v-else>
    <router-view></router-view>
  </el-container>
</template>

<script>
import { useRouter } from "vue-router";
import { localGet, pathMap } from "./utils";
import { Odometer, DataLine, Plus } from "@element-plus/icons-vue";
import { reactive, onUnmounted } from "vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue"
export default {
  name: "App",
  components: {
    Odometer,
    DataLine,
    Plus,
    Header,
    Footer
  },
  setup() {
    const router = useRouter();
    const noMenu = ["/login"];
    const state = reactive({
      defaultOpen: ["1"],
      showMenu: true,
      currentPath: "/dashboard",
      count: {
        number: 1,
      },
    });

    // 监听浏览器原生回退事件
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener(
        "popstate",
        () => {
          console.log("popstate--------");
          if (!localGet("token")) {
            state.showMenu = false;
          }
        },
        false
      );
    }

    const unwatch = router.beforeEach((to, from, next) => {
      if (to.path == "/login") {
        // 如果路径是 /login 则正常执行
        next();
      } else {
        // 如果不是 /login，判断是否有 token
        if (!localGet("token")) {
          // 如果没有，则跳至登录页面
          next({ path: "/login" });
        } else {
          // 否则继续执行
          next();
        }
      }

      state.showMenu = !noMenu.includes(to.path);
      state.currentPath = to.path;
      document.title = pathMap[to.name];
    });

    onUnmounted(() => {
      console.log("-------onUnmounted----------");
      unwatch();
    });

    return {
      state,
    };
  },
};
</script>

<style scope>
body {
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh;
  background-color: white;
}

.aside {
  width: 200px !important;
  background-color: #222832;
  overflow: hidden;
  overflow-y: auto;
}

.content {
}

.main-content {
  padding: 10px!important;
  height: calc(100vh - 200px)!important;
  overflow-y: scroll!important;
}

.aside-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.aside-header img {
  width: 50px;
}

.aside-header span {
  font-size: 20px;
  color: #ffffff;
}

.line {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
</style>
